<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css" />
<script src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<title>对话框（Dialog）的使用</title>
<style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
  </style>
  <script>
  $(function() {
    var $name = $( "#name" );            // id为“name”的input对象
      $email = $( "#email" );            // id为“email”的input对象
      $password = $( "#password" );      // id为“password”的input对象
      allFields = $( [] ).add( $name ).add( $email ).add( $password );         // 将以上三个jquery对象添加到allFields中
	  $tips = $( ".validateTips" );     // class为 validateTips的对象，即提示信息文本所在的对象
    // 更新提示信息
	function updateTips( t ) {          
      $tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        $tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }
	/* 
	检测输入信息的长度
	o为要检测的input对象
	n为提示信息中文本框字段的名称
	min为所需长度的最小值，
	max为所需长度的最大值
	*/
    function checkLength( o, n, min, max ) {      
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "" + n + " 的长度必须在 " +
          min + " 和 " + max + " 之间。" );
        return false;
      } else {
        return true;
      }
    }
    /* 
	使用正则表达式检测输入内容
	o为要检测的input对象
	regexp为要使用的正则表达式
	n为要修改的提示信息
	*/
    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }
 
    $( "#dialog-form" ).dialog({
      autoOpen: false,     // 不自动显示对话框
      height: 300,         // 设置对话框的高度为300
      width: 350,          // 设置对话框的宽度为350
      modal: true,         // 以模式方式打开对话框。即页面背景变灰
      buttons: {           // 设置按钮
        "创建一个帐户": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );
 
          bValid = bValid && checkLength( $name, "用户名", 3, 16 );     // 用户名为3-16位
          bValid = bValid && checkLength( $email, "邮箱", 6, 80 );      // 邮箱为6-80位
          bValid = bValid && checkLength( $password, "密码", 5, 16 );   // 密码为5-16位
          bValid = bValid && checkRegexp( $name, /^[a-z]([0-9a-z_])+$/i, "用户名必须由 a-z、0-9、下划线组成，且必须以字母开头。" );
          if ( bValid ) {
            $( "#users tbody" ).append( "<tr>" +
              "<td>" + $name.val() + "</td>" +
              "<td>" + $email.val() + "</td>" +
              "<td>" + $password.val() + "</td>" +
            "</tr>" );
            $( this ).dialog( "close" );      // 关闭对话框
          }
        },
        "取消": function() {                  // 点击取消时
          $( this ).dialog( "close" );        // 关闭对话框
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });
	// 点击按钮时打开对话框
    $( "#create-user" )
      .button()
      .click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
  });
  </script>
</head>
<body>
<div id="dialog-form" title="创建新用户">
  <p class="validateTips">所有的表单字段都是必填的。</p>
 
  <form>
  <fieldset>
    <label for="name">名字</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
    <label for="email">邮箱</label>
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
    <label for="password">密码</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
  </fieldset>
  </form>
</div>
<div id="users-contain" class="ui-widget">
  <h1>已有的用户：</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>名字</th>
        <th>邮箱</th>
        <th>密码</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>mingrikeji</td>
        <td>mingrikeji@mr.com</td>
        <td>mingrikeji</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">创建新用户</button>
</body>
</html>